<template>
    <h1>筛选商品</h1>
    <div class="one">
        分类：
        <el-select clearable v-model="query.category" class="m-2"  size="large" placeholder=" ">
            <el-option v-for="item in categorys" :key="item" :label="item" :value="item"  />
        </el-select>
        
        搜索条件：
        <el-input v-model="query.search"></el-input>
        <br/>   
        <el-button @click="search">查询</el-button>
    </div>
    <el-table v-loading="Loading" :data="list" style="width: 100% background-color= rgb(18, 19, 19)">
        <el-table-column prop="proid" label="编号" width="190" />
        <el-table-column label="图片" width="180">
            <template #default="scope">
                <img class="img" :src="scope.row.img1" />
            </template>
        </el-table-column>
        <el-table-column prop="proname" label="名称" width="120" />
        <el-table-column prop="brand" label="品牌" width="120" />
        <el-table-column prop="originprice" label="价格" width="120" />
        <el-table-column prop="discount" label="折扣" width="120" />
        <el-table-column prop="sales" label="销量" width="120" />
        <el-table-column prop="stock" label="库存" width="120" />
        <el-table-column label="是否推荐">
            <template #default="scope">
                <el-switch v-model="scope.row.isrecommend" />
            </template>
        </el-table-column>
    </el-table>
</template>

<script setup lang="ts">

import { Loading } from "element-plus/es/components/loading/src/service";
import { ref,reactive } from "vue";
import service from "../../../utils/service";
const loading =ref(true)
// 一、分类
// 定义了分类的数据
const categorys = reactive<string[]>([])
// 获取分类
const getCategorys = () => {
    service({
        url: "/pro/getCategory",
    })
        .then(res => {
            if (res.data.code == "200") {
                categorys.length = 0;
                categorys.push(...res.data.data);
                loading.value=false
            }
        })
}

getCategorys();

// 定义查询条件
const query = reactive<{
    category?: string,
    search?: string
}>({
    category: "",
    search: ""
})


// 定义查询的结果（表格里的数据）

interface goodslist {
    brand: string,
    category: string,
    desc: string,
    discount: number,
    img1: string,
    isrecommend: number,
    issale: number,
    isseckill: number,
    originprice: number,
    proid: string,
    proname: string,
    sales: number,
    stock: number
}

const list = reactive<goodslist[]>([]);

const search = () => {
    service({
        url: "/pro/searchPro",
        method: "post",
        data: `category=${query.category}&search=${query.search}`
    })
        .then(res => {
            if (res.data.code === "200") {
                list.length = 0;
                list.push(...res.data.data);
                console.log("list", list);
            }
        })
}

search();

</script>

<style scoped>
.img {
    width: 150px;
    height: 150px;
    margin: auto;
}
.el-input{
    width: 200px;
    height: 40px;
    /* float: right; */
}
.el-button{
    float: left;
}
.el-table-column{
    background-color: rgb(18, 19, 19);
}

</style>